<template>
  <el-container class="layout-container-demo" style="height: 100vh;">
    <el-aside width="300px" style="height: 120vh;">
      <el-scrollbar style="height: 100%;">
        <el-menu :default-openeds="['1', '3']" style="height: 100%;">
          <el-sub-menu index="1">
            <template #title>
              <span class="menu-title-wrapper menu-title-large">
                <el-icon class="custom-icon"><message /></el-icon>
                <span>信息管理</span>
              </span>
            </template>
            <el-menu-item-group>
              <template #title class="group-title group-title-large">个人信息相关操作</template>
              <el-menu-item index="1-1" class="menu-item-large">
                <router-link :to="{path:'/myinfo'}">个人信息管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-2" class="menu-item-large">
                <router-link :to="{path:'/alltheinfo'}">成员信息管理</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <span class="menu-title-wrapper menu-title-large">
                <el-icon class="custom-icon"><icon-menu /></el-icon>
                <span>文章管理</span>
              </span>
            </template>
            <el-menu-item-group>
              <template #title class="group-title group-title-large">文章操作相关</template>
              <el-menu-item index="2-1">
                <router-link to="/articleClass" class="menu-item-large">文章发布</router-link>
              </el-menu-item>
              <el-menu-item index="2-2">
                <router-link to="/searchArticle" class="menu-item-large">文章查询</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <span class="menu-title-wrapper menu-title-large">
                <el-icon class="custom-icon"><setting /></el-icon>
                <span>数据统计</span>
              </span>
            </template>
            <el-menu-item-group>
              <template #title class="group-title group-title-large">数据统计分类</template>
              <el-menu-item index="3-1" class="menu-item-large">今日数据统计</el-menu-item>
              <el-menu-item index="3-2" class="menu-item-large">历史数据统计</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item @click="goout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>{{ username }}</span>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {onBeforeMount, ref} from 'vue'
import {Menu as IconMenu, Message, Setting} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import axios from "axios"

const router = useRouter()
const username = ref('')

onBeforeMount(() => {
  axios.get("http://localhost:8090/getuserinfo").then((res) => {
    console.log(res)
    username.value = res.data
  })
})

const goout = async () => {
  router.push("/")
}
const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({length: 20}).fill(item))
</script>

<style>
/* 移除scoped属性，使样式全局生效 */
body,
html {
  height: 100%;
  margin: 0;
  font-family: 'Arial', sans-serif;
  color: #333;
  background-image: url('@/assets/kitty2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

}

.menu-title-large {
  font-size: 30px; /* 设置菜单标题的字号大小，可按需调整 */
}

.group-title-large {
  font-size: 20px; /* 分组标题的字号设置，可根据实际情况改变 */
}

.menu-item-large {
  font-size: 20px; /* 菜单项文字的字号设置，可自行修改合适的值 */
}

body, html {
  height: 100%;
  margin: 0;
}

.layout-container-demo {
  height: 100vh;
}

.layout-container-demo.el-aside {
  height: 120vh;
  width: 300px;
  padding: 15px;
}

.layout-container-demo.el-scrollbar {
  height: 100%;
}

.layout-container-demo.el-scrollbar__wrap {
  overflow-x: hidden;
}

.layout-container-demo.el-scrollbar__thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  transition: width 0.3s ease, background-color 0.3s ease; /* 添加宽度和背景色的过渡效果 */
  width: 8px; /* 设置滚动条宽度，可根据实际效果调整 */
}

.layout-container-demo.el-scrollbar__thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
  width: 10px; /* 鼠标悬停时适当增加滚动条宽度 */
}

.layout-container-demo.el-menu {
  border-right: none;
  height: 100%;
  font-size: 16px;
  padding: 20px;
}

.custom-icon {
  font-size: 20px;
}

.layout-container-demo.el-menu-item {
  height: 50px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  background-color: rgba(240, 240, 240, 0.3);
  transition: background-color 0.3s ease;
}

.layout-container-demo.el-menu-item:hover {
  background-color: rgba(200, 200, 200, 0.5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.layout-container-demo.el-menu-item > span {
  margin-left: 10px;
}

.menu-title-wrapper {
  display: flex;
  align-items: center;
  gap:10px;
}

.group-title {
  font-size: 20px;
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 10px;
}

.layout-container-demo.el-menu-item-group >.el-menu-item {
  margin-bottom: 8px;
}
</style>